<template>
  <div id="app">
    <Meta pagealias="cityinfoindex" />
    <Head>{{title}}</Head>
    <div class="top">
      <div class="bg">
        <div class="searchdiv" @click="toggleSearch">
          <img src="../../assets/images/cityinfo/index/index_03.png" />
          <span>搜你想搜的</span>
        </div>
      </div>
      <swiper class="banner" :options="swiperOption" @click-slide="tophandleClickSlide" v-if="info.top_ad_list&&info.top_ad_list.length>0 && $store.state.swiperLoaded">
        <swiper-slide v-for="(item, index) in info.top_ad_list" :key="index">
          <img :src="item.imgurl"/>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
      <swiper class="banner" :options="swiperOption" @click-slide="tophandleClickSlide"  v-else-if="$store.state.swiperLoaded">
        <swiper-slide v-for="(item, index) in 1" :key="index">
          <img src="../../assets/images/cityinfo/index/index_07.png"/>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
    <div class="numinfo">
      <div class="info">信息量<span class="color">{{info.num}}条</span></div>
      <div class="look">浏览量<span class="color">{{info.view}}次</span></div>
    </div>
    <div class="menu">
<!--      【bug】同城信息自定义分类后导航丢失修改 zch 2022/8/1-->
      <swiper :options="swiperOptiontwo" class="item_wrapper_pd" v-if="menupage>0 && $store.state.swiperLoaded">
        <swiper-slide v-for="(item,index) in menupage" :key="index" >
          <div class="div">
            <div class="item" v-for="(item, index) in menu.slice((index * 10), (index * 10) + 10)" :key="index" @click="joblisttwo(item.id)">
              <img v-if="!item.logo_url&&item.id=='1'" src="../../assets/images/cityinfo/class/class_1.png" />
              <img v-if="!item.logo_url&&item.id=='8'" src="../../assets/images/cityinfo/class/class_8.png" />
              <img v-if="!item.logo_url&&item.id=='13'" src="../../assets/images/cityinfo/class/class_13.png" />
              <img v-if="!item.logo_url&&item.id=='18'" src="../../assets/images/cityinfo/class/class_18.png" />
              <img v-if="!item.logo_url&&item.id=='22'" src="../../assets/images/cityinfo/class/class_22.png" />
              <img v-if="!item.logo_url&&item.id=='30'" src="../../assets/images/cityinfo/class/class_30.png" />
              <img v-if="!item.logo_url&&item.id=='34'" src="../../assets/images/cityinfo/class/class_34.png" />
              <img v-if="!item.logo_url&&item.id=='38'" src="../../assets/images/cityinfo/class/class_38.png" />
              <img v-if="!item.logo_url&&item.id=='48'" src="../../assets/images/cityinfo/class/class_48.png" />
              <img v-if="!item.logo_url&&item.id=='60'" src="../../assets/images/cityinfo/class/class_60.png" />
              <img v-if="item.logo_url" :src="item.logo_url" />
              <div class="name">{{item.title}}</div>
            </div>
          </div>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
    <div class="box_3">
      <div class="title"></div>
      <ul :class="{ 'animate-up': animateUp }">
        <li v-for="(item, index) in message_list" :key="index" @click="jumpInfo(item,'item')">
          <div class="div">{{ item.title }}</div>
        </li>
      </ul>
    </div>
    <div class="divmenu">
      <div class="phone" @click="jumpTel"></div>
      <div class="job" @click="joblist"></div>
    </div>
    <swiper
    class="bannertwo"
    :options="swiperOption"
    v-if="info.center_ad_list && info.center_ad_list.length > 0 && $store.state.swiperLoaded"
    @click-slide="centerhandleClickSlide"
    >
      <swiper-slide v-for="(item, index) in info.center_ad_list" :key="index">
          <img :src="item.imgurl"/>
      </swiper-slide>
    </swiper>
    <div class="tab">
      <div
        class="btn"
        :class="params.type == '2' ? 'new' : ''"
        @click="tabdiv('2')"
      >
        <span>最新发布</span>
        <div class="span"></div>
      </div>
      <div
        class="btn"
        :class="params.type == '1' ? 'hot' : ''"
        @click="tabdiv('1')"
      >
        <span>热门信息</span>
        <div class="span"></div>
      </div>
    </div>
    <van-list
      class="list"
      v-model="loading"
      :finished="finished"
      :finished-text="finished_text"
      @load="onLoad"
      :immediate-check="false"
    >
    <ListItem :listData="list" :menu="menu"></ListItem>
    </van-list>
    <BottomNav></BottomNav>
  </div>
</template>
<script>
// import Vue from 'vue'
import BottomNav from './components/BottomNav.vue'
import Fulltext from './components/fulltext.vue'
import ListItem from './components/ListItem'
import http from '@/utils/http'
import api from '@/api'
// import VueAwesomeSwiper from 'vue-awesome-swiper'
// Vue.use(VueAwesomeSwiper)
// let isSpider = new RegExp('^(Baiduspider|YisouSpider|Sogou|Googlebot|Sosospider|bingbot|360Spider)').test(navigator.userAgent)
// if (!isSpider) {
//   Promise.all([
//     import('vue-awesome-swiper')
//   ]).then(([
//     VueAwesomeSwiper
//   ]) => {
//     Vue.use(VueAwesomeSwiper)
//   })
// } else {
// }
export default {
  name: 'cityinfoindex',
  components: {
    BottomNav,
    Fulltext,
    ListItem
  },
  data () {
    return {
      swiperOption: {
        loop: true,
        initialSlide: 0,
        pagination: {
          el: '.swiper-pagination',
          renderBullet: function (index, className) {
            return (
              '<span class="' +
              className +
              ' index-app-four-swiper-span"></span>'
            )
          },
          bulletActiveClass: 'index-app-four-swiper-bullet-active'
        },
        speed: 800
      },
      swiperOptiontwo: {
        pagination: {
          el: '.swiper-pagination',
          renderBullet: function (index, className) {
            return (
              '<span class="' +
              className +
              ' index-app-four-swiper-spantwo"></span>'
            )
          },
          bulletActiveClass: 'index-app-four-swiper-bullet-activetwo'
        },
        initialSlide: 0,
        speed: 800
      },
      animateUp: false,
      loading: false,
      finished: false,
      finished_text: '',
      page: 1,
      pagesize: 15,
      params: {
        type: '2'
      },
      info: {}, // 首页-统计+轮播+推荐
      menu: [], // 菜单
      menupage: 1,
      message_list: [], // 头条推荐
      list: [], // 列表
      title: '',
      JumpItem: null,
      infoPid: null
    }
  },
  created () {
    this.title = this.$store.state.config.cityinfo_title
    this.getinfo()
    this.getmenu()
    this.fetchData(true)
  },
  mounted () {
    this.timer = setInterval(this.scrollAnimate, 3000)
  },
  methods: {
    onLoad () {
      this.page++
      this.fetchData(false)
    },
    // 跳列表页搜索
    toggleSearch () {
      this.$router.push('/cityinfo/searchinfolist')
    },
    // 跳列人才首页
    joblist () {
      this.$router.push('/index')
    },
    jumpTel () {
      this.$router.push('/cityinfo/book')
    },
    // 跳列表页
    joblisttwo (id) {
      this.$router.push('/cityinfo/infolist/' + id + '/0')
    },
    // 公告滚动
    scrollAnimate () {
      this.animateUp = true
      setTimeout(() => {
        this.message_list.push(this.message_list[0])
        this.message_list.shift()
        this.animateUp = false
      }, 500)
    },
    tabdiv (type) {
      this.params.type = type
      this.fetchData(true)
    },
    getinfo () {
      http
        .get(api.city_index)
        .then((res) => {
          this.info = res.data
          this.message_list = res.data.article_list
          this.swiperLoaded = true
        })
        .catch(() => {})
    },
    getmenu () {
      http.get(api.city_selclass)
        .then(res => {
          this.menu = [...res.data]
          var num = Number(this.menu.length / 10) + ''
          var arr = num.split('.')
          if (arr.length > 1) {
            this.menupage = Number(Number(num[0]) + 1)
          } else {
            this.menupage = num
          }
        }).catch(() => {})
    },
    fetchData (init) {
      let conditions = { ...this.params }
      if (init === true) {
        this.page = 1
        this.finished_text = ''
        this.finished = false
      }
      conditions.page = this.page
      conditions.pagesize = this.pagesize
      this.loading = true
      let apiurl
      if (this.params.type == '1') {
        apiurl = api.city_indextwo
      } else {
        apiurl = api.city_indexthree
      }
      http
        .get(apiurl, conditions)
        .then((res) => {
          if (init === true) {
            this.list = []
            this.list = [...res.data]
          } else {
            this.list = this.list.concat(res.data)
          }

          // 加载状态结束
          this.loading = false

          // 数据全部加载完成
          if (res.data.length < this.pagesize) {
            this.finished = true
            if (init === false) {
              this.finished_text = '没有更多了'
            }
          }
        })
        .catch(() => {})
    },
    lookall (index) {
      this.list[index].is_all = 1
      this.list = this.list.map(function (item) {
        return item
      })
    },
    tophandleClickSlide (index, reallyIndex) {
      this.handlerClick(this.info.top_ad_list[reallyIndex])
    },
    centerhandleClickSlide (index, reallyIndex) {
      this.handlerClick(this.info.center_ad_list[reallyIndex])
    },
    handlerClick (item) {
      if (item.link_url) {
        window.location.href = item.link_url
      } else if (item.company_id > 0) {
        this.$router.push('/company/' + item.company_id)
      } else if (item.inner_link) {
        let path = ''
        let params_type = 'query'
        switch (item.inner_link) {
          case 'index':
            path = '/cityinfo'
            break
          case 'infoshow':
            path = '/cityinfo/info'
            params_type = 'params'
            break
          default:
            path = ''
            break
        }
        if (path != '') {
          if (item.inner_link_params > 0) {
            if (params_type == 'query') {
              path = path + '?id=' + item.inner_link_params
            } else {
              path = path + '/' + item.inner_link_params
            }
          }
          this.$router.push(path)
        }
      }
    },
    jumpInfo (val, type) {
      this.JumpItem = val
      for (let index = 0; index < this.menu.length; index++) {
        for (let index2 = 0; index2 < this.menu[index].children.length; index2++) {
          if (parseInt(this.menu[index].children[index2].id) === parseInt(val.type_id)) {
            this.infoPid = this.menu[index].id
          }
        }
      }
      this.infoPid = val.pid ? val.pid : this.infoPid
      if (type == 'item') {
        this.$router.push({
          path: '/cityinfo/info/' + val.id,
          query: {
            pid: val.pid,
            telState: type
          }
        })
      } else {
        if (this.is_personal_login === false) {
          this.$dialog
            .confirm({
              title: '提示',
              message: '当前操作需要登录求职者账号',
              confirmButtonText: '去登录'
            })
            .then(() => {
              this.showLogin = true
              this.after_login_data = {
                method: 'contactHim'
              }
            })
            .catch(() => {})
        } else {
          http.get(api.article_info, {id: val.id}).then(res => {
            if (!res.data.need_pay_for_mobile || (res.data.need_pay_for_mobile && res.data.paid)) {
              window.location.href = 'tel:' + res.data.mobile
            } else {
              this.$router.push({
                path: '/cityinfo/info/' + val.id,
                query: {
                  pid: this.infoPid,
                  telState: type
                }
              })
            }
          })
        }
      }
    }
  }
}
</script>
<style lang="scss">
.index-app-four-swiper-span {
  width: 11px;
  height: 3px;
  border-radius: 100%;
  background-color: #ffffff;
  opacity: 0.6;
}
.index-app-four-swiper-bullet-active {
  width: 11px;
  background-color: #ffffff;
  border-radius: 6px;
  opacity: 1;
}
.index-app-four-swiper-spantwo {
  width: 6px;
  height: 6px;
  border-radius: 100%;
  background-color: #bdbdbd;
  opacity: 1;
}
.index-app-four-swiper-bullet-activetwo {
  background-color: #ff4463;
  opacity: 1;
}
</style>
<style lang="scss" scoped>
.top {
  position: relative;
  .bg {
    height: 160px;
    padding: 16px 20px 0px 16px;
    background-color: #1787fb;
    border-bottom-right-radius: 10%;
    border-bottom-left-radius: 10%;
    .searchdiv {
      height: 38px;
      border-radius: 4px;
      background-color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        margin-right: 8px;
        width: 15px;
        height: 15px;
      }
      span {
        color: #b4bdc9;
        font-size: 15px;
      }
    }
  }
  .banner {
    position: absolute;
    top: 72px;
    width: calc(100vw - 32px);
    margin-left: 16px;
    img {
      width: calc(100vw - 32px);
      height: 148px;
      border-radius: 5px;
    }
    .swiper-pagination {
      bottom: 10px;
    }
  }
}
.numinfo {
  display: flex;
  margin-top: 70px;
  margin-left: 16px;
  margin-right: 16px;
  font-size: 12px;
  .info {
    background: url("../../assets/images/cityinfo/index/index_11.png") 7px
      center no-repeat;
    background-size: 12px 10px;
    padding-left: 30px;
    color: #444444;
    .color {
      margin-left: 11px;
      color: #ff4b28;
    }
  }
  .look {
    margin-left: 50px;
    color: #444444;
    .color {
      color: #ff4b28;
      margin-left: 11px;
    }
  }
}
.menu {
  margin-left: 16px;
  margin-right: 16px;
  .item_wrapper_pd{
    padding-bottom: 30px;
  }
  .swiper-pagination {
    bottom: -7px;
  }
  .div{
    display: flex;
    flex-wrap: wrap;
    .item {
      margin-top: 14px;
      flex: 0 0 20%;
      text-align: center;
      position: relative;
      img {
        width: 50px;
        height: 50px;
      }
      .name {
        line-height: 1;
        font-size: 13px;
        color: #444444;
      }
    }
  }
}
.box_3 {
  width: calc(100vw - 32px);
  background-color: #ffffff;
  position: relative;
  border-radius: 30px;
  padding-left: 77px;
  margin-top: 20px;
  margin-left: 16px;
  height: 35px;
  overflow: hidden;
  box-shadow: 0px 0px 7px #f1f1f1;
  .title {
    position: absolute;
    height: 35px;
    left: 12px;
    width: 56px;
    background: url("../../assets/images/cityinfo/index/index_46.png") 0px
      center no-repeat;
    background-size: 56px 13px;
  }
  li {
    font-size: 14px;
    color: #333333;
    height: 35px;
    width: calc(100vw - 32px - 77px - 16px);
    display: flex;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    .div{
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  .animate-up {
    transition: all 0.5s ease-in-out;
    transform: translateY(-35px);
  }
}
.divmenu {
  display: flex;
  padding-left: 16px;
  margin-top: 22px;
  position: relative;
  padding-bottom: 26px;
  border-bottom: 7px solid #f8f8f8;
  .phone{
    width: 167px;
    height: 70px;
    background: url("../../assets/images/cityinfo/index/index_49.png") 0px
      center no-repeat;
    background-size: 167px 70px;
  }
  .job{
    position: absolute;
    right: 16px;
    width: 167px;
    height: 70px;
    background: url("../../assets/images/cityinfo/index/index_51.png") 0px
      center no-repeat;
    background-size: 167px 70px;
  }
}
.bannertwo{
  width: 100vw;
  background-color: #f8f8f8;
  line-height: 1;
  border-bottom: 4px solid #f8f8f8;
  img {
    width: 100vw;
    height: 65px;
  }
}
.tab {
  display: flex;
  position: relative;
  border-bottom: 1px solid #d5d5d5;
  .btn {
    flex: 1;
    height: 53px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    color: #444444;
    position: relative;
    &.hot {
      font-weight: bold;
      color: #181818;
      line-height: 1;
      span{
        z-index: 1;
      }
      .span {
        position: absolute;
        bottom: 14px;
        width: 75px;
        height: 5px;
        z-index: 0;
        background-image: linear-gradient(to right, #1787fb , rgba(255,255,255,1));
      }
    }
    &.new {
      font-weight: bold;
      color: #181818;
      line-height: 1;
      span{
        z-index: 1;
      }
      .span {
        position: absolute;
        bottom: 14px;
        width: 75px;
        height: 5px;
        z-index: 0;
        background-image: linear-gradient(to right, #1787fb , rgba(255,255,255,1));
      }
    }
  }
}
.list{
  margin-bottom: 55px;
    .item{
        padding: 16px 19px 16px 17px;
        border-bottom: 5px solid #f8f8f8;
        .name{
            position: relative;
            font-size: 0;
            color: #333333;
            .top{
              position: absolute;
              left: 0;
              top: 0;
              background-color: #ff4949;
              color: #FFFFFF;
              font-size: 10px;
              padding: 2px 5px;
              margin-right: 5px;
              display: inline-block;
              border-radius: 3px;
            }
            .all{
              position: absolute;
              bottom: 0;
              right: 80px;
              z-index: 1;
              cursor: pointer;
              color: #ff4949;
              font-size: 14px;
            }
            .text{
              display: inline-block;
              font-size: 14px;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 3;
              overflow: hidden;
            }
            .text_indent{
              text-indent: 2.5em;
            }
        }
        .more::after{
            content: "....";
            font-size: 14px;
            position: absolute;
            bottom: 0;
            right: 0;
            padding-right: 120px;
            padding-left: 4px;
            background: linear-gradient(to right, rgba(255,255,255,0),rgba(255,255,255,1) 0%);
        }
        .imgs{
          margin-top: 12px;
          position: relative;
          display: flex;
          .img,img{
            width: 77px;
            height: 55px;
            margin-right: 11px;
          }
          .imgnum{
            width: 77px;
            height: 55px;
            position: absolute;
            font-size: 11px;
            color: #ffffff;
            right: -2px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: rgba(0,0,0,0.6);
          }
        }
        .bottom{
          margin-top: 17px;
          position: relative;
          display: flex;
          align-items: center;
          font-size: 12px;
          color: #999999;
          .info{
            display: flex;
            align-items: center;
            .label{
              border: 1px solid #1787fb;
              color: #1787fb;
              padding: 1px 3px;
              border-radius: 3px;
            }
            span{
              margin-left: 12px;
            }
          }
          .call{
            width: 81px;
            height: 34px;
            position: absolute;
            right: 0;
            background: url("../../assets/images/cityinfo/index/index_58.png") 0 center no-repeat;
            background-size: 81px 34px;
            display: flex;
            justify-content: center;
            align-items: center;
            padding-bottom: 3px;
            .img{
              height: 15px;
              background: url("../../assets/images/cityinfo/index/index_57.png") 0px center no-repeat;
              background-size: 12px 15px;
              color: #ffffff;
              padding-left: 18px;
              font-size: 13px;
              font-weight: bold;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }
        }
    }
}
</style>
